<template>
    <el-dialog
        :modal="false"
        :modal-append-to-body="false"
        :title="item.title ? item.title : item.name"
        :visible="item.display !== false"
        @close="itemClose"
        width="300px"
    >
        <h2 v-for="v in elements" :key="v" @click="listItemClick(v)">{{ v }}</h2>
    </el-dialog>
</template>
<script>
export default {
    name: 'list-item',
    props: ['item'],
    computed: {
        elements() {
            return this.item.content ? this.item.content.split(',') : []
        }
    },
    methods: {
        itemClose() {
            this.$emit('itemClose', this.item)
        },
        listItemClick(v) {
            this.$emit('listItemClick', this.item, v)
        }
    }
}
</script>

